@import '~antd/es/style/themes/default.less';

.logo{
  width: 252px;
  >div{
    width: 80px;
    height: 80px;
    border-radius: 38%;
    box-shadow: 0 0 20px #ddd;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
    position: relative;

    .setting{
      position: absolute;
      width: 36px;
      height: 36px;
      z-index: 1000;
      overflow: hidden;
      bottom: -8px;
      left: 60px;
      border-radius: 36px;
      background-color: #8f8f8f;
      transition: all 0.4s;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      cursor: pointer;
      .icon{
        animation: none;
      }
      &:hover{
        width: 132px;
        .icon{
          animation: move 10s linear 0s infinite alternate forwards;
        }
      }
    }
  }
}

@keyframes move {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
